<template>
	<view class="wrap">
		<view class="status" v-if="getStatus(info.Status)">
			{{getStatus(info.Status) || ''}}
		</view>
		<view class="address" v-if="info.Delivery_Accepter">
			<view class="address_cell">
				<view class="icon">
					<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1722938992622985.png" mode="aspectFill"></image>
				</view>
				<view class="name">
					{{info.Delivery_Accepter || '--'+' '}}{{info.Delivery_Phone || '--'}}
				</view>
			</view>
			<view class="address_cell" v-if="info.Delivery_Address">
				<view class="icon"></view>
				<view class="lit">
					<text v-if="info.Delivery_Province">{{info.Delivery_Province}}</text> 
					<text v-if="info.Delivery_City">{{info.Delivery_City}}</text>
					<text v-if="info.Delivery_Address">{{info.Delivery_Address}}</text>
				</view>
			</view>
		</view>
		<view class="shop">
			<view class="tit">
				商品信息
			</view>
			<view class="shop_cell" v-for="(item,index) in info.Item" :key="index">
				<view class="icon">
					<image :src="imgeone(item.ProductImg)" mode="aspectFill"></image>
				</view>
				<view class="shop_info">
					<view class="shop_tit">
						{{item.ProductName || '--'}}
					</view>
					<view class="shop_foot">
						<view class="shop_data">
							<view class="lit">
								{{item.Style || '--'}}
							</view>
							<view class="lit" v-if="item.Qty">
								x{{item.Qty}}
							</view>
						</view>
						<view class="shop_price"  v-if="info.OrderType!='赠送订单'">
							<text>¥</text>{{item.Price}}
						</view>
					</view>
				</view>
			</view>
			<view class="shop_total" v-if="info.OrderType!='赠送订单'">
				合计：<text class="unit">¥</text><text class="total">{{total}}</text>
			</view>
		</view>
		
		<view class="person">
			<view class="person_cell" v-if="info.OrderType=='赠送订单' && info.SenderName">
				<view class="tit">
					赠送人
				</view>
				<view class="lit">
					{{info.SenderName}}
				</view>
			</view>
			<view class="person_cell">
				<view class="tit">
					订单编号
				</view>
				<view class="lit">
					{{info.OrderNo}}
				</view>
			</view>
			<view class="person_cell" v-if="istrack" @click="$util.copyText(track.waybill_id)">
				<view class="tit">
					物流单号
				</view>
				<view class="lit" style="color: #3478f6;">
					{{track.waybill_id || '--'}}
				</view>
			</view>
			<view class="person_cell">
				<view class="tit">
					{{info.OrderType=='赠送订单' ? '赠送' : '创建'}}时间
				</view>
				<view class="lit">
					{{$util.formatDateTime(info.OrderTime)}}
				</view>
			</view>
			<view class="person_cell">
				<view class="tit">
					下单时间
				</view>
				<view class="lit">
					{{$util.formatDateTime(info.PayTime)}}
				</view>
			</view>
		</view>
		
		<view class="logistics" v-if="istrack">
			<view class="tit">
				物流信息
			</view>
			<view class="logistics_cell" v-if="track.path.path_action.length">
				<view class="content_cell" v-for="(item,index) in track.path.path_action" :key="index">
					<view class="titbox">
						<view class="icon"></view>
						<view class="time">
							{{$util.formatDateTime(item.action_time,true)}}
						</view>
					</view>
					<view class="titcell">
						<view class="icon">
							<!-- <view class="line" v-show="index!=(track.path.path_action.length-1)"></view> -->
						</view>
						<view class="name">
							{{item.action_msg}}
							
						</view>
					</view>
				</view>
			</view>
			<view class="nullbox" v-else>
				暂无物流信息
			</view>
		</view>
		<view style="height: 180rpx;"></view>
		<view class="payBox" v-if="info.Status==1" @click="$refs.NoPopup.open()">
			<view class="btn payBtn">
				填写快递单号
			</view>
		</view>
		
		<uni-popup ref="NoPopup" type="center">
			<view class="NoPopup">
				<view class="titBox">
					<view class="tit">
						填写快递单号
					</view>
					<view class="icon" @click="closeNoPopup">
						<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/172310685469317.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="inp_main">
					<view class="inpbox">
						<view class="tit">
							物流公司
						</view>
						<input type="text" placeholder="请输入物流公司" v-model="params.Delivery_ExpressCompany"/>
					</view>
					<view class="inpbox">
						<view class="tit">
							物流单号
						</view>
						<input type="text" placeholder="请输入快递单号" v-model="params.Delivery_ExpressNo"/>
						<view class="icon" @click="openScanode">
							<uni-icons type="scan" size="20" color="#fe670a"></uni-icons>
						</view>
					</view>
				</view>
				
				
				<view class="No_btn" @click="Delivered()">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ID:'',
				info:{},
				track:false,
				params:{
					Delivery_ExpressCompany:'',
					Delivery_ExpressNo:'',
				}
			};
		},
		onLoad(e) {
			this.ID = e.id
			// this.init()
		},
		onShow() {
			this.init()
			// this.$refs.NoPopup.open()
		},
		computed:{
			total(){
				if(!this.info || !this.info.Item) return
				let con = 0
				this.info.Item.forEach(item=>{
					con+= item.Qty*item.Price
				})
				return con
			},
			istrack(){
				if(this.track && this.track.path && this.track.path.path_action && Array.isArray(this.track.path.path_action)){
					return true
				}
				return false
			}
		},
		methods:{
			async init(){
				this.Detail()
				this.Track()
			},
			openScanode(){
				uni.scanCode({
					success:  res => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						this.params.Delivery_ExpressNo = res.result
					}
				});
			},
			closeNoPopup(){
				this.params={
					Delivery_ExpressCompany:'',
					Delivery_ExpressNo:'',
				}
				this.$refs.NoPopup.close()
				
			},
			imgeone(img) {
				return img.split(',')[0];
			},
			getStatus(s){
				return s==-2 ? '已退货' : s==1 ? '待发货' : s==3 ? '派送中' : s==4 ? '已完成' : ''
			},
			async Detail(){
				let res = await this.$api.post('/Order/Detail',{ID:this.ID})
				this.info = res.data || false
			},
			async Track(){
				let res = await this.$api.post('/Order/Track',{ID:this.ID})
				if(res.code==0){
					if(res.data.errmsg=='ok'){
						this.track = res.data.waybill_info
					}
				}
			},
			async Delivered(){
				this.params.Delivery_ExpressCompany = this.params.Delivery_ExpressCompany.replace(/\s+/g, "")
				this.params.Delivery_ExpressNo = this.params.Delivery_ExpressNo.replace(/\s+/g, "")
				if(!this.params.Delivery_ExpressCompany){
					this.$pv.msg('请填写物流公司')
					return
				}
				if(!this.params.Delivery_ExpressNo){
					this.$pv.msg('请填写物流单号')
					return
				}
				let params = {
					...this.params,
					ID:this.ID
				}
				
				
				let res =  await this.$api.post('/Order/Delivered',params)
				if(res.code==0){
					this.closeNoPopup()
					this.init()
					uni.$emit('storeOrder')
				}
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #f6f6f6;
}
image{
	width: 100%;
	height: 100%;
}
.wrap{
	padding: 24rpx;
	.status{
		font-weight: bold;
		font-size: 42rpx;
		color: #333333;
		margin: 8rpx 0 32rpx 0;
	}
	.address{
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;
		background-color: #FFFFFF;
		.address_cell{
			display: flex;
			align-items: center;
			.icon{
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.name{
				font-weight: bold;
				font-size: 32rpx;
			}
			.lit{
				width: 92%;
				margin-top: 16rpx;
				font-size: 24rpx;
				color: #666666;
				text{
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
	}
	.shop{
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;
		margin: 16rpx 0;
		.tit{
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}
		.shop_cell{
			margin: 24rpx 0;
			display: flex;
			align-items: center;
			.icon{
				width: 176rpx;
				height: 176rpx;
				overflow: hidden;
				border-radius: 16rpx;
				margin-right: 24rpx;
			}
			.shop_info{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				min-height: 176rpx;
				.shop_tit{
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
				.shop_foot{
					.shop_data{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.lit{
							font-size: 28rpx;
							color: #999999;
						}
					}
					.shop_price{
						font-weight: bold;
						font-size: 36rpx;
						color: #333333;
						color: #F91C1C;
						text{
							font-weight: bold;
							font-size: 20rpx;
							color: #333333;
							color: #F91C1C;
						}
						
					}
				}
			}
		}
		.shop_total{
			text-align: right;
			font-size: 28rpx;
			color: #333333;
			color: #F91C1C;
			.unit{
				font-weight: bold;
				font-size: 20rpx;
				color: #333333;
				color: #F91C1C;
			}
			.total{
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				color: #F91C1C;
			}
		}
	}
	.person{
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;
		.person_cell{
			display: flex;
			align-items: center;
			margin-bottom: 14rpx;
			view{font-size: 28rpx;}
			.tit{
				width: 25%;
				color: #666666;
			}
			.lit{
				width: 75%;
				color: #333333;
			}
		}
		.person_cell:last-child{
			margin-bottom: 0rpx;
		}
	}
	
	.logistics{
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;
		.tit{
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 24rpx;
		}
		.logistics_cell{
			.content_cell{
				.titbox{
					display: flex;
					align-items: center;
					.icon{
						width: 22rpx;
						height: 22rpx;
						border-radius: 50%;
						background-color: #b8bdc5;
						margin-right: 10rpx;
					}
					.name{
						font-size: 28rpx;
						flex: 1;
						word-break: break-all;
					}
					.time{
						padding: 10rpx 0;
						font-size: 26rpx;
						color: #b8bdc5;
					}
				}
				.titcell{
					display: flex;
					align-items: center;
					height: max-content;
					position: relative;
					&::after{
						position: absolute;
						content: '';
						height: 100%;
						width: 2rpx;
						left: 10rpx;
						top: 0;
						background-color: #b8bdc5;
					}
					.icon{
						width: 22rpx;
						margin-right: 10rpx;	
					}
					.time{
						padding: 10rpx 0;
						font-size: 26rpx;
						color: #b8bdc5;
					}
					.name{
						padding: 10rpx 0;
						font-size: 28rpx;
						flex: 1;
						color: #111;
						word-break: break-all;
					}
				}
			}
			.content_cell:first-child{
				.titbox{
					.icon{background-color: #3478f6;}
				}
				.titcell{
					&::after{
						background-color: #3478f6;
					}
				}
			}
			.content_cell:last-child{
				.titcell{
					&::after{
						height: 0;
					}
				}
			}
		}
		.nullbox{
			height: 90rpx;
			font-size: 28rpx;
			color: #b8bdc5;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	.NoPopup{
		width: 85vw;
		padding: 40rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;
		.titBox{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			.tit{
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
			}
			.icon{
				position: absolute;
				right: -24rpx;
				top: -24rpx;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 80%;
					height: 80%;
				}
			}
		}
		.inp_main{
			margin: 56rpx 0;
			.inpbox{
				display: flex;
				align-items: center;
				margin-bottom: 14rpx;
				position: relative;
				.tit{
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					margin-right: 16rpx;
				}
				input{
					flex: 1;
					padding: 18rpx 24rpx;
					// text-align: center;
					background: #F5F5F5;
					border-radius: 8rpx;
				}
			}
			.inpbox:last-child{
				margin-bottom: 0;
				input{
					padding-right: 86rpx;
				}
				.icon{
					padding: 14rpx;
					position: absolute;
					right: 10rpx;
					top: 50%;
					transform: translate(0,-50%);
				}
			}
		}
		
		
		.No_btn{
			background: linear-gradient( 98deg, #FFAD26 0%, #FE4E01 100%);
			border-radius: 44rpx;
			padding: 22rpx 0;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
	
	
	.payBox {
	    position: fixed;
	    width: 100%;
	    box-sizing: border-box;
	    left: 0;
	    bottom: 0;
	    padding: 20rpx 30rpx 50rpx 30rpx;
	    background-color: #fefefe;
	    box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.5);
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
			.btn{
				background: linear-gradient(98deg, #FFAD26 0%, #FE4E01 100%);
			}
	}
}
</style>
